<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style>
			body {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #bfa;
			}

			input {
				font-size: 20px;
				color: red;
			}

			#app {
				text-align: center;
			}

			.box {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}

			label {
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3 align="center">人员情况表</h3>
			<div class="box">
				<label>姓名</label>
				<input type="text" v-model="username">
			</div>
			<div class="box">
				<label>性别</label>
				<input type="radio" value="男" v-model="sex">男
				<input type="radio" value="女" v-model="sex">女
			</div>
			<div class="box">
				<label>爱好</label>
				<input value="唱歌" type="checkbox" v-model="hobbies">唱歌
				<input value="跳舞" type="checkbox" v-model="hobbies">跳舞
				<input value="阅读" type="checkbox" v-model="hobbies">阅读
				<input value="运动" type="checkbox" v-model="hobbies">运动
			</div>
			<div class="box">
				<label>所在学院</label>
				<select name="status" v-model="institute">
					<option value="测绘学院">测绘学院</option>
					<option value="化生材学院">化生材学院</option>
					<option value="理学院">理学院</option>
					<option value="软件学院" selected>软件学院</option>
					<option value="外国语学院">外国语学院</option>
					<option value="信工学院">信工学院</option>
				</select>
			</div>
			<div class="box">
				<label>个人简介</label>
				<textarea name="mine" cols="27" rows="10" v-model="mine"></textarea>
			</div>
			<button @click="submit">提交</button>
		</div>
		    
		<script>
			var exam = new Vue({
				el: "#app",
				data: {
					username: '',
					sex: '',
					hobbies: [],
					institute: [],
					mine: ''
				},
				methods: {
					submit() {
						alert('姓名：' + this.username + '\n' + '性别：' + this.sex + '\n' + '爱好：' + this.hobbies + '\n' +
							'所在学院：' + this.institute + '\n' + '个人简介：' + this.mine)
					}
				}
			})
		</script>    
	</body>
</html>
